<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 表单组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    .checkbox-group,
    .radio-group {
      display: flex;
      flex-direction: column;
      gap: calc(12 * var(--unit));
    }
    
    .switch-group {
      display: flex;
      flex-direction: column;
      gap: calc(16 * var(--unit));
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title title-large">表单组件示例</h1>
    
    <!-- 开关组件 -->
    <div class="example-section">
      <h2 class="example-section-title">开关组件</h2>
      
      <div class="example-form-group">
        <label class="example-label">基础开关</label>
        <div class="switch-group">
          <label class="switch-label">
            <div class="switch">
              <input type="checkbox" class="switch-input">
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">默认开关</span>
          </label>
          
          <label class="switch-label">
            <div class="switch">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">已开启</span>
          </label>
          
          <label class="switch-label switch-label-disabled">
            <div class="switch">
              <input type="checkbox" class="switch-input" disabled>
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">禁用状态</span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">开关尺寸</label>
        <div class="switch-group">
          <label class="switch-label">
            <div class="switch switch-small">
              <input type="checkbox" class="switch-input">
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">小尺寸</span>
          </label>
          
          <label class="switch-label">
            <div class="switch">
              <input type="checkbox" class="switch-input">
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">默认尺寸</span>
          </label>
          
          <label class="switch-label">
            <div class="switch switch-large">
              <input type="checkbox" class="switch-input">
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">大尺寸</span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">开关颜色</label>
        <div class="switch-group">
          <label class="switch-label">
            <div class="switch switch-success">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">成功色</span>
          </label>
          
          <label class="switch-label">
            <div class="switch switch-warning">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">警告色</span>
          </label>
          
          <label class="switch-label">
            <div class="switch switch-danger">
              <input type="checkbox" class="switch-input" checked>
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">危险色</span>
          </label>
        </div>
      </div>
    </div>
    
    <!-- 复选框组件 -->
    <div class="example-section">
      <h2 class="example-section-title">复选框组件</h2>
      
      <div class="example-form-group">
        <label class="example-label">基础复选框</label>
        <div class="checkbox-group">
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input">
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">选项 1</span>
          </label>
          
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" checked>
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">选项 2（已选中）</span>
          </label>
          
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" disabled>
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">选项 3（禁用）</span>
          </label>
          
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" checked disabled>
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">选项 4（已选中且禁用）</span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">复选框尺寸</label>
        <div class="checkbox-group">
          <label class="checkbox checkbox-small">
            <input type="checkbox" class="checkbox-input" checked>
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">小尺寸</span>
          </label>
          
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" checked>
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">默认尺寸</span>
          </label>
          
          <label class="checkbox checkbox-large">
            <input type="checkbox" class="checkbox-input" checked>
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">大尺寸</span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">复选框组（行内）</label>
        <div class="checkbox-group checkbox-group-inline">
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" name="hobby" value="reading">
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">阅读</span>
          </label>
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" name="hobby" value="sports">
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">运动</span>
          </label>
          <label class="checkbox">
            <input type="checkbox" class="checkbox-input" name="hobby" value="music">
            <span class="checkbox-inner"></span>
            <span class="checkbox-text">音乐</span>
          </label>
        </div>
      </div>
    </div>
    
    <!-- 单选框组件 -->
    <div class="example-section">
      <h2 class="example-section-title">单选框组件</h2>
      
      <div class="example-form-group">
        <label class="example-label">基础单选框</label>
        <div class="radio-group">
          <label class="radio">
            <input type="radio" class="radio-input" name="gender" value="male">
            <span class="radio-inner"></span>
            <span class="radio-text">男</span>
          </label>
          
          <label class="radio">
            <input type="radio" class="radio-input" name="gender" value="female" checked>
            <span class="radio-inner"></span>
            <span class="radio-text">女</span>
          </label>
          
          <label class="radio">
            <input type="radio" class="radio-input" name="gender" value="other" disabled>
            <span class="radio-inner"></span>
            <span class="radio-text">其他（禁用）</span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">单选框尺寸</label>
        <div class="radio-group">
          <label class="radio radio-small">
            <input type="radio" class="radio-input" name="size-small" checked>
            <span class="radio-inner"></span>
            <span class="radio-text">小尺寸</span>
          </label>
          
          <label class="radio">
            <input type="radio" class="radio-input" name="size-default">
            <span class="radio-inner"></span>
            <span class="radio-text">默认尺寸</span>
          </label>
          
          <label class="radio radio-large">
            <input type="radio" class="radio-input" name="size-large">
            <span class="radio-inner"></span>
            <span class="radio-text">大尺寸</span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">按钮样式单选框</label>
        <div class="radio-group radio-group-button">
          <label class="radio-button">
            <input type="radio" class="radio-input" name="option" value="option1">
            <span class="radio-button-inner">
              <span class="radio-text">选项 1</span>
            </span>
          </label>
          <label class="radio-button">
            <input type="radio" class="radio-input" name="option" value="option2" checked>
            <span class="radio-button-inner">
              <span class="radio-text">选项 2</span>
            </span>
          </label>
          <label class="radio-button">
            <input type="radio" class="radio-input" name="option" value="option3">
            <span class="radio-button-inner">
              <span class="radio-text">选项 3</span>
            </span>
          </label>
        </div>
      </div>
      
      <div class="example-form-group">
        <label class="example-label">单选框组（行内）</label>
        <div class="radio-group radio-group-inline">
          <label class="radio">
            <input type="radio" class="radio-input" name="type" value="type1">
            <span class="radio-inner"></span>
            <span class="radio-text">类型 1</span>
          </label>
          <label class="radio">
            <input type="radio" class="radio-input" name="type" value="type2" checked>
            <span class="radio-inner"></span>
            <span class="radio-text">类型 2</span>
          </label>
          <label class="radio">
            <input type="radio" class="radio-input" name="type" value="type3">
            <span class="radio-inner"></span>
            <span class="radio-text">类型 3</span>
          </label>
        </div>
      </div>
    </div>
    
    <!-- 完整表单示例 -->
    <div class="example-section">
      <h2 class="example-section-title">完整表单示例</h2>
      
      <form>
        <div class="example-form-group">
          <label class="example-label">用户名</label>
          <input type="text" class="input" placeholder="请输入用户名" required>
          <div class="example-hint">用户名长度为3-20个字符</div>
        </div>
        
        <div class="example-form-group">
          <label class="example-label">性别</label>
          <div class="radio-group radio-group-inline">
            <label class="radio">
              <input type="radio" class="radio-input" name="user-gender" value="male" required>
              <span class="radio-inner"></span>
              <span class="radio-text">男</span>
            </label>
            <label class="radio">
              <input type="radio" class="radio-input" name="user-gender" value="female">
              <span class="radio-inner"></span>
              <span class="radio-text">女</span>
            </label>
          </div>
        </div>
        
        <div class="example-form-group">
          <label class="example-label">兴趣爱好</label>
          <div class="checkbox-group checkbox-group-inline">
            <label class="checkbox">
              <input type="checkbox" class="checkbox-input" name="hobbies" value="reading">
              <span class="checkbox-inner"></span>
              <span class="checkbox-text">阅读</span>
            </label>
            <label class="checkbox">
              <input type="checkbox" class="checkbox-input" name="hobbies" value="sports">
              <span class="checkbox-inner"></span>
              <span class="checkbox-text">运动</span>
            </label>
            <label class="checkbox">
              <input type="checkbox" class="checkbox-input" name="hobbies" value="music">
              <span class="checkbox-inner"></span>
              <span class="checkbox-text">音乐</span>
            </label>
          </div>
        </div>
        
        <div class="example-form-group">
          <label class="switch-label">
            <div class="switch">
              <input type="checkbox" class="switch-input" name="notifications">
              <span class="switch-track">
                <span class="switch-handle"></span>
              </span>
            </div>
            <span class="switch-text">接收通知</span>
          </label>
        </div>
        
        <div class="button-group">
          <button type="button" class="button button-secondary">取消</button>
          <button type="submit" class="button button-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

